<script lang="ts" setup>
//存档
import SingleMeatPage from "@/components/Black/SingleMeatPage.vue";
import Screen from "@/components/Black/Screen.vue";
import useGetData from "@/store/get";
import tool from "@/tool";
import { onMounted, ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
//实例化路由
const route = useRoute();
const router = useRouter();
// 实例化 store
const store = useGetData();

//存储待展示数据
const data = ref();
//总页码数
const total = ref(0);

//当前页码
const currentPage = ref(0);
//获取页面展示用数据
const getPostData = async () => {
  //获取当前页码
  currentPage.value = Number(route.query.page) || 1;
  const category = Number(route.params.category);
  const year = Number(route.params.year);
  const month = Number(route.params.month);
  //拿到当前页所需数据
  const idData = await store.getPagePostIds(
    10,
    currentPage.value,
    category,
    year,
    month
  );
  //拿到页码
  const pp = Number(idData.page) * 10;
  //待展示文章ID
  const arrId = idData.data.map((item: { id: 0 }) => item.id);
  //获取文章内容数组
  const postData = await store.packageEasyPostData(arrId);
  //整理数组以便展示
  const data = tool.handleArchiveArrData(postData);
  const obj = {
    page: pp,
    id: arrId,
    data: data,
  };
  return obj;
};
//展示的文章ID数组
const postId = ref([0]);
//初始加载
onMounted(async () => {
  //拿到数据
  const obj = await getPostData();
  //拿到总页码
  total.value = obj.page;
  //拿到展示数据
  data.value = obj.data;
  postId.value = obj.id;
});
//监听路由
watchEffect(async () => {
  console.log("监听路由");
  console.log(route);
  //拿到数据
  const obj = await getPostData();
  //拿到总页码
  total.value = obj.page;
  //拿到展示数据
  data.value = obj.data;
  postId.value = obj.id;
});

//存储当前页码

//修改路由
/**
 * 通过route.path获取当前路由路由
 * 使用router.push将page属性添加到查询参数中
 * 当用户点击分页组件中的页数时，就会自动更新路由中的查询参数
 */
const handlePageChange = (page: number) => {
  const query = Object.assign({}, route.query, { page: page });

  // 判断如果查询参数为1，则不加入查询参数中，否则加入
  if (page === 1) {
    router.push({ path: route.path }).catch((err) => {});
  } else {
    router.push({ path: route.path, query }).catch((err) => {});
  }
};
</script>
<template>
  <section class="archive">
    <!-- -->
    <Screen></Screen>
    

    <div class="results">
      <div class="results__content">
        <!--开始循环渲染 ---->
        <div class="result" v-for="item in data">
          <h2 class="result__title">{{ item.time }}</h2>
          <SingleMeatPage
            :data="index"
            v-for="index in item.data"
          ></SingleMeatPage>
        </div>
      </div>
    </div>
    <!--分页-->
    <nav class="pagination-ctrl">
      <div class="pagination-ctrl__content">
        <el-pagination
          :pager-count="5"
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
          @current-change="handlePageChange"
          style="margin: 0"
        />
      </div>
    </nav>
  </section>
</template>
<style lang="less" scoped>
//列表标题
.result__title {
  margin-bottom: 16px;
  font-size: 28px;
  line-height: 1.14286;
  font-weight: 700;
  letter-spacing: 0.007em;
  font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC",
    "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  margin-top: 52px;
}

//分页
.pagination-ctrl {
  margin-top: 60px;
  margin-bottom: 60px;
}
.pagination-ctrl__content {
  padding: 0 22px;
  max-width: 330px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1068px) {
  .result__title {
    margin-top: 48px;

    font-size: 24px;
    line-height: 1.16667;
    font-weight: 700;
    letter-spacing: 0.009em;
  }

  //分页
  .pagination-ctrl {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

@media only screen and (max-width: 734px) {
  .result__title {
    font-size: 21px;
    line-height: 1.19048;
    font-weight: 700;
    letter-spacing: 0.011em;
  }
  //分页
  .pagination-ctrl {
    margin-top: 13px;
    margin-bottom: 45px;
  }
  .pagination-ctrl__content {
    max-width: 314px;
    padding: 0 16px;
  }
}
</style>
